<template>
    <div class="login">
        <div class="background">
            <div class="card_login">
                <n-card>
                    <n-tabs default-value="signin" size="large">
                        <n-tab-pane name="signin" tab="登录">
                            <n-form>
                                <n-form-item-row label="用户名">
                                    <n-input
                                             v-model:value="Login_user.username"
                                             placeholder="用户名"/>
                                </n-form-item-row>
                                <n-form-item-row label="密码">
                                    <n-input
                                            v-model:value="Login_user.password"
                                            type="password"
                                            value=""
                                            show-password-toggle
                                            placeholder="密码"
                                            :maxlength="8"
                                    />
                                </n-form-item-row>
                            </n-form>
                            <n-button type="primary" block @click="handleLogin">登录</n-button>
                        </n-tab-pane>
                        <n-tab-pane name="signup" tab="注册">
                            <n-form>
                                <n-form-item-row label="用户名">
                                    <n-input  placeholder="请输入你的用户名"/>
                                </n-form-item-row>
                                <n-form-item-row label="密码">
                                    <n-input
                                            type="password"
                                            show-password-toggle
                                            placeholder="请输入你的密码"
                                            :maxlength="8"
                                    />
                                </n-form-item-row>
                                <n-form-item-row label="重复密码">
                                    <n-input
                                            type="password"
                                            show-password-toggle
                                            placeholder="请再次输入你的密码"
                                            :maxlength="8"
                                    />
                                </n-form-item-row>
                            </n-form>
                            <n-button type="primary" block>注册</n-button>
                        </n-tab-pane>
                    </n-tabs>
                </n-card>
            </div>
        </div>
    </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { useStore } from 'vuex';
  import { key } from  '../store'
  export default defineComponent({
    name: 'login',

    setup() {
        window.$store = useStore(key);
      return {

      }
    },
    data() {
      return {
        Login_user:{
          username: '',
          password: '',
        }
      }
    },
   methods: {
     handleLogin() {
     //  1. 检查填写信息是否完整
       if(this.Login_user.username==='admin' || this.Login_user.username === 'admin') {
         window.$message.success('登录成功');
         window.$store.commit('addTOKEN','123');
         window.$store.commit('addSTATUS',1);
         window.$store.commit('addUSER', {username:'李延年',id: 'ISCN9890809890'});
         window.$router.push('/')
       }else if(this.Login_user.username==='' ||this.Login_user.username === '') {
         window.$message.warning('请完善账号或密码');
       }else {
         window.$message.warning('账号密码错误');
       }
     }
   }
  });
</script>

<style lang="scss" scoped>
    .login {
        width: 1200px;
        margin: 0 auto;
        padding: 0;
        .background{
            margin-top: 20px;
            margin-bottom: 20px;
            width: 100%;
            height: 500px;
            background-image: url("../assets/bg.png");
            background-size: cover;
            background-size:100% 500px;
            .card_login {
                width: 300px;
                height: 300px;
                margin-top: 20px;
                margin-right: 20px;
                float: right;
            }
        }
    }
</style>
